<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon.ico">
  <link rel="icon" type="image/png" href="./favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
    name='viewport' />

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Main CSS -->
  <link href="../assets/css/main.css" rel="stylesheet" />

  <!-- Animation CSS -->
  <link href="../assets/css/vendor/aos.css" rel="stylesheet" />
  <title>司机管理模块</title>
  <style>
    body {
      background-color: rgb(236, 242, 247);
    }

    .urelimg {
      /* width: 50px; */
      box-shadow: 8px 14px 9px 3px rgba(0, 0, 0, 0.4);
    }

    .card {
      width: 320%;
    }

    .img {
      width: 70%;
    }
  </style>
</head>

<body>

  <div style="position:fixed; bottom:20px;left:20px;">
    <a href="./project_index.html" target="_blank"><img class="rounded-circle shadow-lg"
        src="../assets/img/demo/coffee.png" width="70" data-toggle="tooltip" data-placement="top" title=""
        data-original-title="Buy me a coffee!"></a>
  </div>

  <div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-danger position-relative">
    <div class="container text-white h-100 tofront">
      <div class="row align-items-center justify-content-center text-center">
        <div class="col-md-10">
          <h1 class="display-3">司机管理模块详情</h1>
        </div>
      </div>
    </div>
  </div>

  <!-- Main -->
  <div class="container pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <article>
          <h1>司机功能实现（李宁）</h1>
          <p>
            司机管理模块主要实现的功能 是 <strong>查看司机详情</strong> ， 编辑<strong>查询功能、重置功能</strong>，<strong>配置车辆</strong>
            ，其中难点在于<strong>查询跳转页面</strong>，在查看详情的时候 需要通过<strong>路由传递参数</strong>
          </p>
          <h3>主页运行样式展示图</h3>
          <p>
            主页通过接口调数据渲染出来表格
          </p>
          <figure class="text-center mt-4 mb-4 full-width" data-aos="fade-up">
            <div class="col-md-6 col-lg-4" style="margin-left: 278px">
              <div class="card" style="width: 1336px; margin: auto;">
                <img class="img-card-top" src="./img/SiJi.png">
                <div class="card-body">
                  <a href="#">
                    <h5 class="card-title text-dark">实现功能的代码图片</h5>
                    <span class="card-text text-muted">
                      <div class="container pt-5 pb-5" data-aos="fade-up">
                        <div class="row justify-content-center">
                          <div class="col-md-8">
                            <article data-aos="zoom-in-up">
                              <p>
                                页面的跳转操作，<strong>代码如下：</strong>
                              </p>
                              <p>传递数据id 👇</p>
                              <blockquote data-aos="zoom-in-up">
                                <p>
                                  <img src="./img/imgss/司机id.png" alt="" class="urelimg">
                                </p>
                              </blockquote>
                              <p>实现逻辑 👇</p>
                              <blockquote data-aos="zoom-in-up">
                                <p>
                                  <img src="./img/imgss/获取id.png" alt="" class="urelimg">
                                </p>
                              </blockquote>
                            </article>
                          </div>
                        </div>
                      </div>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </figure>
        </article>
      </div>
    </div>

  </div>
  <!-- End Main -->
  <!-- <div class="container pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center" style="margin-bottom: 50px;">
      <div class="col-md-8">
        <article>
          <h1><strong>订单管理模块</strong>详情功能展示</h1>
          <p>
            订单模块的详情页跳转 需要通过路由传递参数，来调用接口获取详情页要展示的数据
          </p>
        </article>
      </div>
    </div>
  </div> -->

  <!-- <div style="width: 70%; margin: auto; margin-bottom: 80px;" data-aos="zoom-in-up">
    <div class="col-md-6 col-lg-4" style="margin-left: 0;">
      <div class="card">
        <video autoplay loop muted>
          <source src="./img/imgss/查看详情.mp4" type="video/mp4" class="">
        </video>
        <div class="card-body">
          <h5 class="card-title text-dark">下面是实现上面视频中功能的代码图片</h5>
          <span class="card-text text-muted">
            <div class="container pt-5 pb-5" data-aos="fade-up">
              <div class="row justify-content-center">
                <div class="col-md-8">
                  <article data-aos="fade-up">
                    <h4>点击详情按钮<strong>通过路由传递id</strong></h4>
                    <blockquote>
                      <p>
                        <img src="./img/imgss/跳转页面.png" alt="" class="urelimg">
                      </p>
                    </blockquote>
                    <p></p>
                    <h4 data-aos="fade-up">当跳转成功<strong>获取传递来的数据id</strong></h4>
                    <blockquote data-aos="fade-up">
                      <p>
                        <img src="./img/imgss/获取路由id.png" alt="" class="urelimg">
                      </p>
                    </blockquote>
                    <h4 data-aos="fade-up">最后将获取到的id用于接口传参<strong>获取接口数据</strong></h4>
                    <blockquote data-aos="fade-up">
                      <p>
                        <img src="./img/imgss/数据的定义.png" alt="" class="urelimg">
                      </p>
                    </blockquote>
                  </article>
                </div>
              </div>
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>


 -->












  <!-- dark footer -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
    <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
      style="margin-top: 200px;">
    </path>
  </svg>
  <footer class="bg-black pb-5">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md mr-4">
          <i class="fas fa-copyright text-white"></i>
          <small class="d-block mt-3 mb-3 text-muted">© 排班管理模块</small>
        </div>
        <div class="col-6 col-md">
          <h5 class="mb-4 text-white">模块制作人</h5>
          <ul class="list-unstyled text-small">
            <li style="font-weight: 900"><a class="text-muted" href="#">冷祝基</a></li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5 class="mb-4 text-white">素材制作人</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="#">冷祝基</a></li>
          </ul>
        </div>
      </div>
  </footer>

  <!--------------------------------------
JAVASCRIPTS
--------------------------------------->
  <script src="../assets/js/vendor/jquery.min.js" type="text/javascript"></script>
  <script src="../assets/js/vendor/popper.min.js" type="text/javascript"></script>
  <script src="../assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
  <script src="../assets/js/functions.js" type="text/javascript"></script>

  <!-- Animation -->
  <script src="../assets/js/vendor/aos.js" type="text/javascript"></script>
  <noscript>
    <style>
      *[data-aos] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    </style>
  </noscript>
  <script>
    AOS.init({
      duration: 700
    });
  </script>

  <!-- Disable animation on less than 1200px, change value if you like -->
  <script>
    AOS.init({
      disable: function () {
        var maxWidth = 1200;
        return window.innerWidth < maxWidth;
      }
    });
  </script>
</body>

</html>